<!doctype html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>商品列表</title>
		<link rel="stylesheet" href="http://shop.com:5500/resources/css/bootstrap.min.css" type="text/css" />
		<script src="http://shop.com:5500/resources/js/jquery-1.11.3.min.js" type="text/javascript"></script>
		<script src="http://shop.com:5500/resources/js/bootstrap.min.js" type="text/javascript"></script>
		<script type="text/javascript" src="http://shop.com:5500/resources/js/jquery-heima-0.0.1.js" ></script>
		<script type="text/javascript" src="http://shop.com:5500/resources/js/heima-include.js" ></script>
		<script type="text/javascript" src="http://shop.com:5500/resources/js/vue.js" ></script>	
	</head>

	<body>
			<div class="container-fluid">
			<div id="header" style="min-height: 130px;"></div>	
			<div class="container">
				<div class="row" style="width:1100px;margin:0 auto;text-align: center;" id="product_list">
			
				</div>
		
				<!--分页 -->
				<div style="width:380px;margin:0 auto;margin-top:50px;">
					<ul class="pagination" style="text-align:center; margin-top:10px;" id="pagination">
						<!-- <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
						<li class="active"><a href="#">1</a></li>
						
						<li>
							<a href="#" aria-label="Next">
								<span aria-hidden="true">&raquo;</span>
							</a>
						</li> -->

					</ul>
				</div>
				<!-- 分页结束=======================        -->
		
				<!--
		       		商品浏览记录:
		        -->
				<div style="width:1210px;margin:0 auto; padding: 0 9px;border: 1px solid #ddd;border-top: 2px solid #999;height: 246px;">
		
					<h4 style="width: 50%;float: left;font: 14px/30px " 微软雅黑 ";">浏览记录</h4>
					<div style="width: 50%;float: right;text-align: right;"><a href="">more</a></div>
					<div style="clear: both;"></div>
		
					<div style="overflow: hidden;">
		
						<ul style="list-style: none;">
							<li style="width: 150px;height: 216;float: left;margin: 0 8px 0 0;padding: 0 18px 15px;text-align: center;"><img src="http://shop.com:5500/resources/products/1/cs10001.jpg" width="130px" height="130px" /></li>
						</ul>
		
					</div>
				</div>
			</div>
			<div id="footer"  style="min-height: 203px;"></div>
		</div>
		<script>
			// 入口函数
			$(function(){
				// 拿到地址栏的，cid
				var cid = HM.getParameter("cid");
				var pageNumber = HM.getParameter("pageNumber")==null? 1:HM.getParameter("pageNumber");
				$.ajax({
					// pageNumber第几页
					url:"http://api.shop.com:8080/product?md=findProductByCid&cid="+cid+"&pageNumber="+pageNumber,
					type:"post",
					success:function(response) {
						// 处理字符串
						// alert(response);
						var info=eval("("+response+")");
						var pageBean = info.data;
						var product_list = pageBean.data;
						var html="";
						for(p of product_list){
							
							html+="<div class=\"col-md-2\" style=\"text-align:center;height:200px;padding:10px 0px;\">\n" +
							"\t\t\t\t\t\t<a href=\"info.html?pid="+p.pid+"\">\n" +
							"\t\t\t\t\t\t\t<img src=\"http://shop.com:5500/"+p.pimage+"\" width=\"130\" height=\"130\" style=\"display: inline-block;\">\n" +
							"\t\t\t\t\t\t</a>\n" +
							"\t\t\t\t\t\t<p><a href=\"info.html?pid="+p.pid+"\" style='color:#666'>"+p.pname+"</a></p>\n" +
							"\t\t\t\t\t\t<p><font color=\"#E4393C\" style=\"font-size:16px\">&yen;"+p.shop_price+"</font></p>\n" +
							"\t\t\t\t\t</div>";
						}

						$("#product_list").html(html);
						// 处理分页工具条
						var tool = HM.page(pageBean,"http://shop.com:5500/view/product/list.html?cid="+cid);
						$("#pagination").append(tool);
						}
					})
			})
		</script>
	</body>
</html>